如何编写 Greasemonkey 脚本

在本文中，记录了我入门 Greasemonkey 脚本编写的过程。

Greasemonkey 本质是向网页注入 JavaScript 代码。

Get hands dirty

最快速的入门方式就是直奔目标，寻找一个好玩的脚本分析之：文本选中复制，直奔代码。

元数据

脚本的开头是遗传固定写法。称为元数据。具体可参见《元数据 - 开发教程 - GM 开发手册》。几个有趣字段的含义：

@match：匹配网址，规则 Match Patterns。
@run-at：运行时机
@connect：可以连接到哪些域名进行跨域请求
@grant：权限
@require：外部依赖

代码入口

代码入口也是固定写法：

(function () {
	// 逻辑
})();

实现逻辑

规则

该脚本适配了众多网站，用统一的 Object 结构表示适配规则，每个网站为一个 Object。

有一个数组 websites 汇聚所有规则：

const websites = [
  website$s,
  //……
  website$3,
  website$2,
  website$1,
  website
];

鼠标事件监听

要破除限制，需要注册触发事件：

(function() {
  // 初始化
  const websiteConfig = initWebsite();
  initBaseEvent(websiteConfig);
  initBaseStyle();
  // 注册鼠标事件
  window.addEventListener(
    MOUSE_UP,
    (e) => {
      // 1. 获取用户选中的文本
      // 2. 如果文本为空，隐藏某些界面元素
      // 3. 如果文本不为空，那么调复制方法
      const handler = () => {
        const content = getSelectedText();
        if (isEmptyContent(content)) {
          instance.hide();
          return "";
        }
        instance.onCopy(content, e);
      };
      websiteConfig.delay 
	      ? setTimeout(handler, websiteConfig.delay) 
	      : handler();
    },
    // 事件的捕获或冒泡阶段是否触发事件处理函数
    websiteConfig.captureInstance
  );
})();

主要功能是监听鼠标的 "mouseup" 事件，当用户选中某些文本并释放鼠标按钮时，获取选中的文本并执行一些操作。

getSelectedText

该方法作用为获取选中文本。

该脚本对多种网站均做了专门适配。这说明，这些网站在文本选择上也实施了众多限制，需要专门适配。对应于众多网站适配对象的 getSelectedText 方法。

getSelectedText 方法也提供了兜底策略，如果网站没有声明专门适配，则走兜底策略：

const getSelectedText = () => {
  if (siteGetSelectedText)
    return siteGetSelectedText();
  if (window.getSelection)
    return (window.getSelection() || "").toString();
  if (document.getSelection)
    return (document.getSelection() || "").toString();
  if (document.selection)
    return document.selection.createRange().text;
  return "";
};

可见，是对 DOM API 的正常请求。